<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>签核系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <!-- import CSS -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
    <link rel="icon" href="/febs/images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/febs/vue/element-ui-index.css" />
    <script src="/febs/vue/vue.js"></script>
    <script src="/febs/vue/httpVueLoader.js"></script>
    <script src="/febs/vue/element-ui-index.js"></script>
    <script src="/febs/vue/axios.min.js"></script>
    <script src="/febs/vue/util/index.js"></script>
  </head>
  <body>
    <div id="app" class="w-app" v-loading="loading" element-loading-text="拼命加载中">
      <!-- 销毁申请第一类详情页 -->
      <destory-type-one v-if="applicationForm && type === '1'" :props-form="applicationForm"></destory-type-one>

      <!-- 销毁申请第二类详情页 -->
      <destory-type-two v-if="applicationForm && type === '2'" :props-form="applicationForm"></destory-type-two>

      <!-- 销毁申请第三类详情页 -->
      <destory-type-three v-if="applicationForm && type === '3'" :props-form="applicationForm"></destory-type-three>

      <!-- 量产采购单签核类详情页 -->
      <output-purchase v-if="applicationForm && type === '4'" :props-form="applicationForm"></output-purchase>
      <!-- 原料采购单 -->
      <Type6_7_9 v-if="applicationForm && (type === '6'|| type === '7'|| type === '9')" :props-form="applicationForm"></Type6_7_9>
      <!-- 采购变更单 -->
      <Type8 v-if="applicationForm && type === '8'" :props-form="applicationForm"></Type8>
      <!-- 开发采购单 -->
      <Type10 v-if="applicationForm && type === '10'" :props-form="applicationForm"></Type10>
      <!-- 开发加工采购单 -->
      <Type11 v-if="applicationForm && type === '11'" :props-form="applicationForm"></Type11>
      <!-- 开发零星采购单 -->
      <Type12 v-if="applicationForm && type === '12'" :props-form="applicationForm"></Type12>
      <!-- 总务采购单 -->
      <Type13 v-if="applicationForm && type === '13'" :props-form="applicationForm"></Type13>
      <!-- 模具采购单 -->
      <Type14 v-if="applicationForm && type === '14'" :props-form="applicationForm"></Type14>
      <!-- 加工单 -->
      <Type15_16_17_18
        v-if="applicationForm && (type === '15' || type === '16' || type === '17' || type === '18')"
        :props-form="applicationForm"
      ></Type15_16_17_18>
      <!-- 补料采购单 -->
      <Type19_20 v-if="applicationForm && (type === '19' || type === '20')" :props-form="applicationForm"></Type19_20>
      <!-- 异定设备异动单 -->
      <Type22 v-if="applicationForm && type === '22'" :props-form="applicationForm"></Type22>
      <!-- 异定资产验收单（转入单） -->
      <Type23 v-if="applicationForm && type === '23'" :props-form="applicationForm"></Type23>
      <!-- 底厂采购单 -->
      <Type24_25 v-if="applicationForm && type === '24'||applicationForm && type === '25'" :props-form="applicationForm"></Type24_25>
      <!-- 底厂采购变更单 -->
      <Type26 v-if="applicationForm && type === '26'" :props-form="applicationForm"></Type26>
      <!-- 公共部分-审核流程 -->
      <audit-process v-if="qhChkmgrdList && type  && showQhChkmgrdList" :props-form="applicationForm"></audit-process>
    </div>
  </body>
  <!-- import Vue before Element -->
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
  <!-- import JavaScript -->
  <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
  <script>
    Vue.prototype.$util = util;
    new Vue({
      el: "#app",
      data() {
        return {
          loading: true,
          sessionStorageData: JSON.parse(sessionStorage.parameterData), //获取请求参数
          type: "", //1,2,3,4代表这种不同的表格
          applicationForm: null,
          qhChkmgrdList: null,
          showQhChkmgrdList: false,
        };
      },
      created() {
        axios
          .post("/approvals/report", JSON.parse(sessionStorage.parameterData))
          .then((response) => {
            this.applicationForm = response.data.data;
            if (response.data.data.qhChkmgrdList) {
              this.qhChkmgrdList = response.data.data.qhChkmgrdList;
            }
            this.type = response.data.data.type;
            this.$nextTick(() => {
              this.testType(this.type);
            });
            this.loading = false;
            if (!this.type) {
              this.$message.error("数据为空");
            }
            if (this.sessionStorageData?.billstdNm) {
              document.title = this.sessionStorageData.billstdNm;
            }
          })
          .catch((error) => {
            this.loading = false;
            console.log(error);
          });
      },
      methods: {
        testType(redType) {
          const redTpyes = ["1", "2", "3"];
          if (redTpyes.includes(redType)) {
            this.showQhChkmgrdList = true;
          } else {
            this.showQhChkmgrdList = false;
          }
        },
      },
      components: {
        "audit-process": httpVueLoader("/febs/vue/components/ApprovalsDetail/AuditProcess.vue"),
        "destory-type-one": httpVueLoader("/febs/vue/components/ApprovalsDetail/DestoryTypeOne.vue"),
        "destory-type-two": httpVueLoader("/febs/vue/components/ApprovalsDetail/DestoryTypeTwo.vue"),
        "destory-type-three": httpVueLoader("/febs/vue/components/ApprovalsDetail/DestoryTypeThree.vue"),
        "output-purchase": httpVueLoader("/febs/vue/components/ApprovalsDetail/OutputPurchase.vue"),
        Type6_7_9: httpVueLoader("/febs/vue/components/ApprovalsDetail/Type6_7_9.vue"),
        Type8: httpVueLoader("/febs/vue/components/ApprovalsDetail/Type8.vue"),
        Type10: httpVueLoader("/febs/vue/components/ApprovalsDetail/Type10.vue"),
        Type11: httpVueLoader("/febs/vue/components/ApprovalsDetail/Type11.vue"),
        Type12: httpVueLoader("/febs/vue/components/ApprovalsDetail/Type12.vue"),
        Type13: httpVueLoader("/febs/vue/components/ApprovalsDetail/Type13.vue"),
        Type14: httpVueLoader("/febs/vue/components/ApprovalsDetail/Type14.vue"),
        Type15_16_17_18: httpVueLoader("/febs/vue/components/ApprovalsDetail/Type15_16_17_18.vue"),
        Type19_20: httpVueLoader("/febs/vue/components/ApprovalsDetail/Type19_20.vue"),
        Type22: httpVueLoader("/febs/vue/components/ApprovalsDetail/Type22.vue"),
        Type23: httpVueLoader("/febs/vue/components/ApprovalsDetail/Type23.vue"),
        Type24_25: httpVueLoader("/febs/vue/components/ApprovalsDetail/Type24_25.vue"),
        Type26: httpVueLoader("/febs/vue/components/ApprovalsDetail/Type26.vue"),
      },
    });
  </script>

  <style>
    .w-app {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      font-size: 14px;
    }
    .w-app > div > div {
      margin-bottom: 15px;
    }
    .w-app div.w-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 25px;
    }
    .horizontal-direction {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
    }
    .horizontal-box {
      width: 33.3%;
      text-align: left;
    }
    .text-center {
      text-align: center;
    }
    .text-left {
      text-align: left;
    }
    th,
    td {
      padding: 4px 4px;
    }
    .main-table,
    .main-table th,
    .main-table td {
      border-collapse: collapse;
      border: 1px solid #000;
      table-layout: auto;
      text-align: center;
    }
    .main-table th {
      background: #b3ffb3;
    }
    .total > td {
      padding: 6px 4px;
    }
    .horizontal-sign {
      margin-top: 40px;
    }
    .examine-cell {
      border-bottom: 1px solid #000;
      width: 80%;
    }
    .sign {
      border-bottom: 1px solid #000;
      width: 300px;
    }
    .text-16px {
      font-size: 16px;
    }
    .main-table tr.blank,
    .main-table td.blank {
      height: 10px;
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
    }
    .w-bold {
      font-weight: bold;
    }
    .w-min-width {
      min-width: 40px;
    }
    .table-flow {
      width: 70%;
    }
    .base-stamp {
      position: relative;
    }
    .stamp {
      position: absolute;
      right: 10%;
      bottom: 0px;
    }
    @media screen and (max-width: 1300px) {
      .table-flow {
        width: 100%;
      }
    }
    @media print {
      .table-flow {
        width: 100%;
      }
      .stamp {
        bottom: -150px !important;
      }
    }
    .el-loading-mask {
      height: 100vh;
    }
  </style>
</html>
